<template>
  <div class="operate-page operate-component" v-show="show">
    <div class="operate-btn d-flex justify-end">

      <div class="btn-item btn-copy d-flex align-center fs-10" @click="handleCopy">
        <a-tooltip content="复制" position="bottom">
          <icon-copy />
        </a-tooltip>
      </div>
      <div class="btn-item btn-delete d-flex align-center fs-10" @click="handleDelete">
        <a-tooltip content="删除" position="bottom">
          <icon-delete />
        </a-tooltip>
      </div>
      <div class="btn-item btn-edit d-flex align-center fs-10" @click="handleEdit">
        <a-tooltip content="编辑" position="bottom">
          <icon-edit />
        </a-tooltip>
      </div>
      <div class="btn-item btn-paste d-flex align-center fs-10" @click="handlePaste('top')">
        <a-tooltip content="向上粘贴" position="bottom">
          <icon-arrow-up />
        </a-tooltip>
      </div>
      <div class="btn-item btn-paste d-flex align-center fs-10" @click="handlePaste('bottom')">
        <a-tooltip content="向下粘贴" position="bottom">
          <icon-arrow-down />
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  show: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['handleCopy', 'handleDelete', 'handleEdit', 'handlePaste'])

const handleCopy = () => {
  emit('handleCopy')
}
const handleDelete = () => {
  emit('handleDelete')
}
const handleEdit = () => {
  emit('handleEdit')
}
const handlePaste = (type: string) => {
  emit('handlePaste', type)
}
</script>

<style lang="scss" scoped>
.operate-page {
  position: absolute;
  top: 0;
  right: 0;
  max-height: 100%;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;

  .operate-btn {
    .btn-item {
      margin-left: 12px;
      padding: 8px;
      font-size: 10px; // 不再使用 !important
      color: #fff;
      border-radius: 4px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      border-radius: 50%;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }

    .btn-copy {
      background: $warning-color;
    }

    .btn-delete {
      background: $error-color;
    }

    .btn-edit {
      background: $primary-color;
    }

    .btn-paste {
      background: $success-color;
    }
  }
}
</style>